<script setup>
import { ref, computed } from 'vue';
import { orderSearch,updateStatus } from '@/api/order.js'
import OrderDetail from './components/OrderDetail.vue'

const orderDetailRef = ref(null)
const total = ref(0)
const pages = ref(0)
const params = ref({
  pageNo: 1,
  pageSize: 5
})
const getOrderList = async () => {
  const { data:{ data: { data }} } = await orderSearch(params.value)
  orders.value = data.list
  total.value = data.total
  pages.value = data.pages
  console.log("datadatadata",data);
  
}
getOrderList()
const handleSizeChange = (page) => {
  params.value.pageSize = page
  getOrderList()
}
const handleCurrentChange = (page) => {
  params.value.pagenum = page
  getOrderList()
}

console.log("分页情况跟踪", params.value);
const orders = ref([])
    const searchForm = ref({
      orderNo: '',
      phone: '',
      dateRange: [],
      status: ''
    });

    const selectedOrder = ref(null);

    const filteredOrders = computed(() => {
      return orders.value.filter(order => {
        return (
          (!searchForm.value.orderNo || order.orderNo.includes(searchForm.value.orderNo)) &&
          (!searchForm.value.phone || order.phone.includes(searchForm.value.phone)) &&
          (!searchForm.value.dateRange.length || 
           (new Date(order.createTime) >= searchForm.value.dateRange[0] && 
            new Date(order.createTime) <= searchForm.value.dateRange[1])) &&
          (!searchForm.value.status || order.status === searchForm.value.status)
        );
      });
    });

    const onSearch = () => {
      getOrderList()
      console.log("查询数据",params.value);
      
      // getOrderList()
      // 这里可以添加搜索逻辑，例如调用后端API
    };

    const filterByStatus = (status) => {
      params.value.status = status;
      getOrderList();
    };

    const getStatusType = (status) => {
      switch (status) {
        case '待接单':
          return 'warning';
        case '派送中':
          return 'primary';
        case '已完成':
          return 'success';
        case '已退款':
          return 'danger';
        case '退款申请中':
          return 'danger';
        case '待支付':
          return 'info';
        default:
          return '';
      }
    };

    const handleRowClick = (row) => {
      selectedOrder.value = row;
    };

const handleStatus =  async (status,row) => {
  await updateStatus(status,row.id)
  getOrderList()
  // ElNotification({
  //   title: 'Title',
  //   message: h('i', { style: 'color: teal' }, 'This is a reminder'),
  // })
}
const lookOrderDetail = (row) => {
  orderDetailRef.value.open(row)
}


</script>



<template>
  <page-Container title="订单管理">
    <div class="order-management-container">
      <div class="button-group-container">
        <el-button-group class="button-group">
          <el-button type="primary" @click="filterByStatus(1)">待接单</el-button>
          <el-button style="margin-left: 20px;" type="primary" @click="filterByStatus(2)">派送中</el-button>
          <el-button style="margin-left: 20px;" type="primary" @click="filterByStatus(3)">已完成</el-button>
          <el-button style="margin-left: 20px;" type="primary" @click="filterByStatus(4)">已退款</el-button>
          <el-button style="margin-left: 20px;" type="primary" @click="filterByStatus(5)">待支付</el-button>
          <el-button style="margin-left: 20px;" type="primary" @click="filterByStatus(6)">退款申请中</el-button>
        </el-button-group>
      </div>

      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="params.orderNo" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="params.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="下单时间范围">
          <el-date-picker
            v-model="params.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="filteredOrders" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>        <el-table-column prop="receiver" label="收货人" min-width="120"></el-table-column>
        <el-table-column prop="address" label="收获地址" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150"></el-table-column>
        <el-table-column prop="creator" label="创建人" min-width="120"></el-table-column>
        <el-table-column prop="statusName" label="订单状态" min-width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.statusName)">
              {{ scope.row.statusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template #default="scope">
            <el-button size="small" type="primary" @click="lookOrderDetail(scope.row)">查看详情</el-button>
            <el-button size="small" type="success" @click="handleStatus(2,scope.row)" v-if="scope.row.status === 1">接单</el-button>
            <el-button size="small" type="danger" @click="handleStatus(4,scope.row)" v-if="scope.row.status === 6">同意退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      v-model:current-page="params.pageNo"
      v-model:page-size="params.pageSize"
      :page-sizes="[5, 7, 10]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
    </div>
    <OrderDetail ref="orderDetailRef"></OrderDetail>
  </page-Container>
  
</template>



<style scoped>

.order-management-container {
  width: 100%;
  padding: 20px;
}

.button-group-container {
  margin-bottom: 20px;
  text-align: left; /* 确保按钮组靠左对齐 */
}

.demo-form-inline {
  margin-bottom: 20px;
}

.el-form-item {
  margin-right: 20px;
}

.el-table {
  width: 100%;
  overflow-x: auto; /* 确保表格在小屏幕上可以水平滚动 */
}

.el-table-column {
  min-width: 120px; /* 设置最小宽度以确保表格列不会被压缩 */
}
</style>